<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="../../css/reset.css">
		<link rel="stylesheet" href="../../css/swiper.css">
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1516407_rud7f3pybu9.css" />
		<title>同城</title>
		<style>
			body,
			html {
				width: 100%;
				height: 100%
			}
			
			#city {
				width: 100%;
			}
			
			.swiper-container,
			.swiper-wrapper,
			.swiper-slide {
				width: 100%;
			}
			
			.swiper-slide img {
				width: 100%;
				height: 350px;
			}
			
			.cityHeard {
				width: 80%;
				margin-top: 10px;
				margin-left: 10%;
				display: flex;
				justify-content: space-around;
			}
			
			.cityHeard img {
				width: 22%;
			}
			
			.citySide {
				width: 50%;
				margin-top: 10px;
				margin-left: 10%;
				font-size: 16px;
				color: #666;
			}
			
			.citySide tr {
				width: 100%;
			}
			
			.paixu {
				width: 30%;
				margin-right: 10%;
				margin-top: 10px;
				overflow: hidden;
				float: right;
			}
			
			.paixu span,
			.paixu strong,
			.paixu em {
				display: inline-block;
				width: 25%;
				float: right;
			}
			
			.cityContent {
				width: 80%;
				margin: auto;
			}
			
			.cityContent {
				width: 80%;
				margin: auto;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			
			.cityContent ul {
				
				width: 24%;
				text-align: center;
				background: #f8f6f7;
				margin-top:20px;
			}
			
			.cityContent ul li {
				width: 100%;
			}
			
			.cityContent-img img {
				width: 100%;
			}
			
			.cityContent-theam {
				margin-top:10px;
				font-size: 18px;
				color: #5b5a5b;
			}
			.cityContent-speak{
				margin-top:10px;
			}
			.cityContent-speak span,.cityContent-speak strong{
				
				font-size:14px;
				color:#ec6a17;
			}
			.cityContent-addr{
				margin-top:10px;
				margin-bottom: 10px;
				font-size:12px;
				color:#7e7d7d;
			}
			
		</style>
	</head>

	<body>
		<div id="city">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="../../img/img-JL/coffee.png" alt="" /></div>
					<div class="swiper-slide"><img src="../../img/img-JL/coffee.png" alt="" /></div>
					<div class="swiper-slide"><img src="../../img/img-JL/coffee.png" alt="" /></div>
					<div class="swiper-slide"><img src="../../img/img-JL/coffee.png" alt="" /></div>
					<div class="swiper-slide"><img src="../../img/img-JL/coffee.png" alt="" /></div>

				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="cityHeard">
				<img src="../../img/img-JL/RM.png" alt="" />
				<img src="../../img/img-JL/RM1.png" alt="" />
				<img src="../../img/img-JL/XP.png" alt="" />
				<img src="../../img/img-JL/XP1.png" alt="" />
			</div>

			<table class="citySide">
				<tr>
					<th>分类:</th>
					<th>全部</th>
					<th>餐饮</th>
					<th>酒店</th>
					<th>休闲</th>
					<th>电影</th>
					<th>汽车装饰</th>
					<th>家政服务</th>

				</tr>
			</table>
			<div class="paixu">
				<em>评分最高</em>
				<strong> 价格</strong>
				<span>销量</span>
			</div>
			<div class="cityContent">
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				<ul>
					<li class="cityContent-img"> <img src="../../img/img-JL/PX.png" /></li>
					<li class="cityContent-theam"> 阳澄湖大闸蟹</li>
					<li class="cityContent-speak">
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<span class="iconfont icon-start1"></span>
						<strong>￥62/人</strong>
					</li>
					<li class="cityContent-addr">浙江省台州市温岭市人民西路2号</li>
				</ul>
				

			</div>
		</div>

	</body>
	<script src="../../js/jquery-3.4.1.js"></script>
	<script src="../../js/swiper.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			autoplay: 3000, //可选选项，自动滑动
			speed: 1000,
			direction: 'horizontal',
			loop: true,

			// 如果需要分页器
			pagination: '.swiper-pagination',

			// 如果需要前进后退按钮
			//			nextButton: '.swiper-button-next',
			//			prevButton: '.swiper-button-prev',

			// 如果需要滚动条
			//			scrollbar: '.swiper-scrollbar',
		})
	</script>

</html>